// 信息渲染

// 个人信息设置界面

// 自己的用户信息，给自己起一个外号，告诉服务器我是谁，获取对应用户信息

// 渲染个人信息到页面上

// 定义全员变量


const creator='老胡'
axios({
    url:'http://hmajax.itheima.net/api/settings',
    params:{
      creator
    } 
}).then(result=>{
    
    const userObj = result.data.data
    console.log(userObj);

    // 1.2 数据回显 

    // 1.3 遍历对象属性 

    Object.keys(userObj).forEach(keys=>{

        // 在性别里需要添加checked=true
        // img图片需要进行特殊的处理，img需要做一些特殊处理，性别单选框也要做特殊处理
   if(keys === 'avatar'){
    // 单独赋予默认头像

    document.querySelector('.prew').src= userObj[keys]
    
   }else if(keys ==='gender'){

    // 获取性别单选框
    const genderList = document.querySelectorAll('.gender')
    //获取到性别数字
    const sex = userObj[keys]
    
    genderList[sex].checked = true
//    }else{
//     document.querySelector(`.${keys}`).value= userObj[keys]
//    }
   }

    })


})
document.querySelector('.upload').addEventListener('change',e=>{
    console.log(e.target.files[0]);

    // 2.1 获取头像文件
    
    // 新建一个formData对象
    const formdata  = new FormData()
    formdata.append('avatar',e.target.files[0],)
    formdata.append('creator',creator)
    console.log(formdata);

    //修改个人头像接口

    axios({
        url:'http://hmajax.itheima.net/api/avatar',
        method:'PUT',
        data:formdata

    }).then(result=>{
        console.log(result);
        const imgUrl = result.data.data.avatar
        document.querySelector('.prew').src=imgUrl
    })

})

document.querySelector('.submit').addEventListener('click',e=>{
    // 提交用户信息修改

    // 点击之后收集用户更新的表单数据

    //使用form-serialize插件
    const userform = document.querySelector('.user-form')
    const userdataList = serialize(userform,{hash:true,empty:true})
    // 新增属性 creator
    userdataList.creator = creator
    // 测试

    console.log(userdataList);
    
    // 性别数字字符串,转成数字类型,使用一元运算符
    userdataList.gender = +userdataList.gender

    console.log(userdataList);
    axios({
        url:'http://hmajax.itheima.net/api/settings',
        method:'PUT',
        data:userdataList

    }).then(result=>{
       const nickname=  document.querySelector('.nickname').value
        alert(nickname+'提交成功!')
    })
    
    
})
